<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>图片加载平移放大缩小示例</title>
    <link rel="stylesheet" href="http://www.ytbuyer.com/style/commons/reset.css">
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="vendor/jquery/dist/jquery.js"></script>
    <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
    <script src="vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>

<div class="logo p-a"><img src="./images/logo.png"/></div>

<ul class="crt-list p-a">
    <li id="crt1"><button class="btn btn-lg btn-success btn-r"><span class="glyphicon glyphicon-plus"></span>&nbsp;新建农场</button></li>
    <li id="crt2" style="display: none"><button class="btn btn-lg btn-info btn-u"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;确定位置</button></li>
</ul>

<!--地图展示-->
<div class="map-pos t-c">
    <div class="map-center d-ib p-r">
        <img src="./images/hubei2.svg" id="img" class="p-r"/>
        <!--农场定位-->
        <div class="drag p-a c-p" style="display: none; left: 40%; top: 20%;"><span class="glyphicon glyphicon-map-marker"></span></div>
    </div>
</div>

<!--新建农场-->
<div class="farm-menu p-a farm-set">
    <div class="form-group from-box">
        <h5 class="tit-lin tit-pad">新建/编辑农场</h5>
    </div>

    <from class="form-farm">
        <div class="form-group col-lg-12">
            <label class="control-label col-lg-3 col-sm-3 font-sml tit-lin">农场ID：</label>
            <div class="col-lg-6 col-sm-6 tit-lin">0001</div>
            <div class="col-lg-3 col-sm-3 tit-lin"><input type="checkbox" checked/>&nbsp;&nbsp;启用</div>
        </div>
        <div class="form-group col-lg-12">
            <label class="control-label col-lg-3 col-sm-3 font-sml tit-lin">农场名称：</label>
            <div class="input-group col-lg-8 col-sm-8">
                <input type="text" class="form-control" autocomplete="off" placeholder=""/>
            </div>
        </div>
        <div class="form-group col-lg-12">
            <label class="control-label col-lg-3 col-sm-3 font-sml tit-lin">经度：</label>
            <div class="input-group col-lg-6 col-sm-6">
                <input type="text" class="form-control" autocomplete="off" placeholder=""/>
            </div>
        </div>
        <div class="form-group col-lg-12">
            <label class="control-label col-lg-3 col-sm-3 font-sml tit-lin">纬度：</label>
            <div class="input-group col-lg-6 col-sm-6">
                <input type="text" class="form-control" autocomplete="off" placeholder=""/>
            </div>
        </div>
        <div class="form-group col-lg-12">
            <label class="control-label col-lg-3 col-sm-3 font-sml tit-lin">纬度：</label>
            <div class="input-group col-lg-9 col-sm-9">
                <button class="btn btn-success btn-r save-new-set">&nbsp;&nbsp;&nbsp;&nbsp;保存设置&nbsp;&nbsp;&nbsp;&nbsp;</button>&nbsp
                <button class="btn btn-f-c cancel-new-set">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </from>
</div>

<!--查询列表-->
<div class="farm-menu p-a farm-new">
    <form class="form-group from-box">
        <label class="control-label col-lg-3 col-sm-3 tit-lin text-center">农场列表</label>
        <div class="col-lg-9 col-sm-9">
            <div class="input-group">
                <input type="text" class="form-control" autocomplete="off" placeholder=""/>
                <div class="input-group-btn">
                    <div class="btn btn-default" ><span class="glyphicon glyphicon-search"></span></div>
                </div>
            </div>
        </div>
    </form>

    <ul class="farm-c-list">
        <li>
            <div class="col-lg-8">
                <div class="info-l"><span class="d-ib"><a href="farmSet.html">武汉四季美农场</a></span>    ( ID:0001 )</div>
                <div class="info-l"> 经度－49.5000°&nbsp 纬度 -123.5000d </div>
            </div>
            <div class="col-lg-4 text-center">
                <button class="btn btn-default btn-col op-set"><span class="glyphicon glyphicon-edit"></span>&nbsp;操作</button>
            </div>
        </li>
        <li class="enabled">
            <div class="col-lg-8">
                <div class="info-l"><span class="d-ib tit-col">武汉四季美农场</span>    ( ID:0001 )</div>
                <div class="info-l"> 经度－49.5000°&nbsp 纬度 -123.5000d </div>
            </div>
            <div class="col-lg-4 text-center">
                <button class="btn btn-default btn-col btn-col-m op-set"><span class="glyphicon glyphicon-edit"></span>&nbsp;未启用</button>
            </div>
        </li>
        <li>
            <div class="col-lg-8">
                <div class="info-l"><span class="d-ib">武汉四季美农场</span>    ( ID:0001 )</div>
                <div class="info-l"> 经度－49.5000°&nbsp 纬度 -123.5000d </div>
            </div>
            <div class="col-lg-4 text-center">
                <button class="btn btn-default btn-col op-set"><span class="glyphicon glyphicon-edit"></span>&nbsp;操作</button>
            </div>
        </li>
        <li>
            <div class="col-lg-8">
                <div class="info-l"><span class="d-ib">武汉四季美农场</span>    ( ID:0001 )</div>
                <div class="info-l"> 经度－49.5000°&nbsp 纬度 -123.5000d </div>
            </div>
            <div class="col-lg-4 text-center">
                <button class="btn btn-default btn-col op-set"><span class="glyphicon glyphicon-edit"></span>&nbsp;操作</button>
            </div>
        </li>
    </ul>
</div>

<span class="scale p-f"></span>

</body>
</html>